import React from 'react'
import PropTypes from 'prop-types'
import { Button, Col, Form, Input, InputNumber, Row, Select } from "antd"

const FormItem = Form.Item
const { Option } = Select
const { TextArea } = Input

const ColProps = {
  xs: 6,
  sm: 6,
  style: {
    marginBottom: 6,
  },
}

const textAreaLayout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 22 },
}

const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
  style: {
    marginBottom: 10,
  },
}

const status = [
  {
    id: 1,
    name: '运营号总数',
    color: 'rgb(240, 72, 100)',
    icon: 'team',
    count: 6,
  },
  {
    id: 2,
    name: '在线个数',
    color: 'rgb(47, 194, 91)',
    icon: 'link',
    count: 3,
  },
  {
    id: 3,
    name: '退登个数',
    color: 'rgb(250, 204, 20)',
    icon: 'logout',
    count: 1,
  },
  {
    id: 4,
    name: '离线个数',
    color: 'rgba(0, 0, 0, 0.45)',
    icon: 'disconnect',
    count: 2,
  },
  {
    id: 5,
    name: '手动添加',
    color: 'rgb(19, 194, 194)',
    icon: 'user-add',
    count: 3,
  },
]

const Detail = ({
  data,
  friendType,
  adAcquireType,
  disabled,
  onEdit,
  onCancel,
  handleUpdate,
  handleSubmit,
  handleFormReset,
  form: {
    getFieldDecorator,
    getFieldsValue,
    setFieldsValue,
  },
}) => {

  const editing = !disabled

  const onSave = () => {
    const fields = getFieldsValue()
    const { id, gender, inHisBlacklist, inMyBlacklist, star, icon, deleteMe, friendCirclePermission, addType, region } = data
    const params = {
      id,
      gender,
      inHisBlacklist,
      inMyBlacklist,
      star,
      icon,
      deleteMe,
      friendCirclePermission,
      addType,
      region: {
        id: region ? region.id : null,
      },
    }

    const payload = {
      ...fields,
      ...params,
    }
    delete payload.belongEmpName
    handleUpdate(payload)
  }

  return (
    <Form layout="horizontal">
      <Row gutter={24}>
        <Col {...ColProps} xl={{ span: 6 }} md={4} sm={24}>
          <FormItem {...formItemLayout} label="好友微号">
            {getFieldDecorator('friendWxId', { initialValue: data.dfriendWxId })(<Input disabled placeholder="好友微信号" />)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{ span: 6 }} md={4} sm={24}>
          <FormItem {...formItemLayout} label="好友昵称">
            {getFieldDecorator('friendNickName', { initialValue: data.friendNickname })(<Input disabled
              placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{ span: 6 }} md={4} sm={24}>
          <FormItem {...formItemLayout} label="好友备注">
            {getFieldDecorator('remark', { initialValue: data.friendRemark })(<Input disabled placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{ span: 6 }} md={4} sm={24}>
          <FormItem {...formItemLayout} label="性别">
            {getFieldDecorator('gender', { initialValue: data.gender === 0 ? "女" : "男" })(<Input disabled
              placeholder="请输入" />)}
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col {...ColProps} xl={{ span: 6 }} md={4} sm={24}>
          <FormItem {...formItemLayout} label="归属微信">
            {getFieldDecorator('operatorWxId.wxId', { initialValue: data.operatorWxId ? data.operatorWxId.wxId : '-' })(
              <Input disabled placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{ span: 6 }} md={4} sm={24}>
          <FormItem {...formItemLayout} label="归属员工">
            {getFieldDecorator('belongEmpName', { initialValue: data.operatorWxId ? data.operatorWxId.belongEmp.username : '-' })(
              <Input disabled placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{ span: 6 }} md={4} sm={24}>
          <FormItem {...formItemLayout} label="通过日期">
            {getFieldDecorator('becomeFriendTime', { initialValue: data.becomeFriendTime })(<Input disabled
              placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{ span: 6 }} md={4} sm={24}>
          <FormItem {...formItemLayout} label="获客渠道">
            {getFieldDecorator('adAcquireChannel.id', { initialValue: data.adAcquireChannel ? data.adAcquireChannel.name : '' && data.adAcquireChannel.id })(
              <Select disabled={disabled} allowClear onSelect={(value, { props }) => {
                getFieldDecorator('adAcquireChannelName', { initialValue: props.children })
              }} placeholder="请选择">
                {adAcquireType.map(item => (<Option value={item.id}>{item.name}</Option>))}
              </Select>,
            )}
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col {...ColProps} xl={{ span: 6 }} md={4} sm={24}>
          <FormItem {...formItemLayout} label="省份城市">
            {getFieldDecorator('region', { initialValue: data.region })(<Input disabled placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{ span: 6 }} md={4} sm={24}>
          <FormItem {...formItemLayout} label="是否星标">
            {getFieldDecorator('star', { initialValue: data.star === false ? "否" : "是" })(<Input disabled
              placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{ span: 6 }} md={4} sm={24}>
          <FormItem {...formItemLayout} label="好友类型">
            {getFieldDecorator('friendType.id', { initialValue: data.friendType ? data.friendType.name && data.friendType.id : '' & '' })(
              <Select allowClear disabled={disabled} onSelect={(value, { props }) => {
                getFieldDecorator('friendTypeName', { initialValue: props.children })
              }} placeholder="请选择">
                {friendType.map(item => (<Option value={item.id}>{item.name}</Option>))}
              </Select>,
            )}
          </FormItem>
        </Col>

        <Col {...ColProps} xl={{ span: 6 }} md={4} sm={24}>
          <FormItem {...formItemLayout} label="录入日期">
            {getFieldDecorator('ctime', { initialValue: data.ctime })(<InputNumber disabled placeholder="请输入" />)}
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col {...ColProps} xl={{ span: 6 }} md={4} sm={24}>
          <FormItem {...formItemLayout} label="被我拉黑">
            {getFieldDecorator('inMyBlacklist', { initialValue: data.inMyBlacklist === 0 ? "是" : "否" })(<Input disabled
              placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{ span: 6 }} md={4} sm={24}>
          <FormItem {...formItemLayout} label="把我拉黑">
            {getFieldDecorator('inHisBlacklist', { initialValue: data.inHisBlacklist === 0 ? "是" : "否" })(<Input disabled
              placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col {...ColProps} xl={{ span: 6 }} md={4} sm={24}>
          <FormItem {...formItemLayout} label="订单次数">
            {getFieldDecorator('orderCount', { initialValue: data.orderCount })(<Input disabled placeholder="请输入" />)}
          </FormItem>
        </Col>

        <Col {...ColProps} xl={{ span: 6 }} md={4} sm={24}>
          <FormItem {...formItemLayout} label="最后跟进">
            {getFieldDecorator('lastFollowUpTime', { initialValue: data.lastFollowUpTime })(<InputNumber disabled
              placeholder="请输入" />)}
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>
        <Col {...ColProps} xl={{ span: 6 }} md={4} sm={24}>
          <FormItem {...formItemLayout} label="成交总额">
            {getFieldDecorator('transactionAmount', { initialValue: data.transactionAmount })(<InputNumber disabled
              placeholder="请输入" />)}
          </FormItem>
        </Col>
        <Col md={22} sm={24}>
          <FormItem {...textAreaLayout} label="备注">
            {getFieldDecorator('remark', { initialValue: data.remark })(<TextArea rows={4} disabled={disabled}
              placeholder="备注信息" />)}
          </FormItem>
        </Col>
      </Row>
      <Row gutter={24}>

      </Row>
      <Row gutter={24}>
        <Col xl={{ span: 6 }} md={6} sm={24}>
        </Col>
        <Col xl={{ span: 6 }} md={6} sm={24}>
        </Col>
        <Col xl={{ span: 6 }} md={6} sm={24}>
        </Col>
        <Col xl={{ span: 6 }} md={6} sm={24}>
          {editing ? (<div>
            <Button onClick={onSave} style={{ marginRight: 10 }} type="primary">保存编辑</Button>
            <Button onClick={onCancel}>取消</Button>
          </div>) : (
              <div>
                <Button className="margin-right" style={{ marginLeft: '50%' }} type="primary" onClick={onEdit}>编辑</Button>
              </div>
            )}
        </Col>
      </Row>
    </Form>
  )
}


Detail.propTypes = {
  handleSubmit: PropTypes.func,
  handleFormReset: PropTypes.func,
  form: PropTypes.object,
}

export default Form.create()(Detail)
